<script setup lang="ts">
import UserBioPanel from './UserBioPanel.vue';
import UserConnections from './UserConnections.vue';
import { inject, ref } from 'vue';
import { userInfoApi } from '@/api/system/user';
import type { UserInfo } from '@/types/user';
import { dAccountInfoApi } from '@/api/dashboard';
import config from '@/config';

const emitter = inject('emitter');

const userData = ref<UserInfo>({
  role: 1, // 角色
  shareCode: null, // 分享码
  shareUrl: '', // 短链接
  email: '',
  sex: 1,
  mobile: '',
  language: undefined,
  countryName: '',
  upline: '', // 上级
});

const fetchUserInfo = () => {
  userInfoApi().then((res: any) => {
    console.log('userInfoApi res:', res);
    userData.value = res;
  });
  dAccountInfoApi().then((res: any) => {
    console.log('dAccountInfoApi:', res);
    userData.value.vote = res.votes;
    userData.value.totalProposal = res.proposals;
    if (userData.value.shareUrl !== '' && userData.value.shareUrl !== null) {
      userData.value.shareUrl = userData.value.shareUrl?.replace(
        config.shortUrlPrefix,
        ''
      );
    }
    console.log('userData:', userData.value);
  });
};

fetchUserInfo();

// @ts-ignore
emitter.on('refreshUser', msg => {
  console.log('refresh user info');
  if (msg === true) {
    fetchUserInfo();
  }
});
</script>

<template>
  <div class="profile-wrapper bg-[#F4F5FA]">
    <v-row>
      <v-col cols="12" md="5" lg="4">
        <user-bio-panel :user-data="userData" />
      </v-col>
      <v-col cols="12" md="7" lg="8">
        <user-connections />
      </v-col>
    </v-row>
  </div>
</template>

<style lang="scss" scoped>
.profile-wrapper {
  @apply xs:px-6 sm:px-20 md:px-10 lg:px-[108px] xl:px-[228px] py-6;
}
</style>
